<!-- 收货方扫描签收的数量确认列表 -->
<template>
  <div>
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单时间</span>
            <div class="flex1 value">{{BbMain.InputDate | time}}</div>
          </li>
          <li class="displayflex">
            <span class="label">送货联系人</span>
            <div class="flex1 value">{{PoMain.SendContacts}} {{PoMain.SendContactsTel}}</div>
          </li>
          <li class="displayflex">
            <span class="label">总件数</span>
            <div class="flex1 value"><em class="red">{{TotalConPKGS}}</em>件</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mb30" v-for="(item, index) in todolist">
      <div class="m-list-warp">
        <div class="m-list-pictxt">
          <div class="displayflex">
            <div class="pic w200"><img :src="item.PictContent | filterImg"></div>
            <div class="m-list-txt flex1">
              <p>{{item.GoodsName}}</p>
              <p class="gray">{{item.GoodsSpec}}</p>
              <p class="gray">{{item.Producer}}</p>
              <p>共<em class="red">{{item.ConPKGS}}</em>件</p>
            </div>
          </div>
        </div>
      </div>
      <div class="m-checknum-wrap displayflex">
        <span class="cn-lft">交货件数:</span>
        <div class="cn-ipt-wrap flex1 cf">
          <div class="cn-ipt-box f-l cf">
            <span class="icon minus f-l"
              @click="changeNum(index,-1)"></span>
            <span class="ipt f-l">
              <input class="red" type="text"
                     v-model="item.ConPKGS"
                     @input="addSum(index)">
            </span>
            <span class="icon add f-r"
              @click="changeNum(index,1)"></span>
          </div>
          <span class="cn-unit f-l">件</span>
        </div>
        <div class="btn-checknum" @click="recebtn(index,$event)">确认</div>
        <div class="flex1 cn-rece">
          <div>交货件数:<em>{{item.ConPKGS}}件</em></div>
          <div class="icon-rece"><img src="~images/icon/tag_yjh.png"></div>
        </div>
      </div>
    </div>
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{goodSum}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel" @click="cancel()">取消</li>
          <li class="btn-checknum f-l" @click="Confirm()">确认交货</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
export default  {
  components: {
    mapState
  },
  data: function() {
    return {
      BbMain: {},
      PoMain: {},
      Vehicle: {},
      BbDetailList: [],
      todolist:[],
      datas:{},
      OriginTodolist:[],
      clickBtn:[],
      goodSum:0,
      TotalConPKGS:0,
    };
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo')?JSON.parse(localStorage.getItem('userinfo')):null;
    }
  },
  created:function() {
    this.getData();
  },
  methods: {
    getData: function() {
      let query = {
        Guid: this.$route.query.Guid,
        QueryType: 'Tracing',
      };
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        if(res.IsSuccess){
          this.BbMain = res.Data.BbMain;
          this.PoMain = res.Data.PoMain;
          this.Vehicle = res.Data.Vehicle;
          this.VehicleDetail = res.Data.VehicleDetail;

          let GoodsList = JSON.parse(JSON.stringify(res.Data.VehicleExies));
          GoodsList.forEach(x => {
            let goodItem = res.Data.BbDetailList.find(y => {
              return parseInt(y.RowNo) == parseInt(x.BBillRowNo);
            });

            x.Pkgs = x.Pkgs?parseInt(x.Pkgs):0;
            x.MaxConPKGS = x.ConPKGS?parseInt(x.ConPKGS):0;
            x.GoodsName = goodItem.GoodsName;
            x.GoodsSpec = goodItem.GoodsSpec;
            x.Producer = goodItem.Producer;
            this.TotalConPKGS += x.ConPKGS;
            this.clickBtn.push(false);
          });
          this.todolist = GoodsList;
          this.OriginTodolist = JSON.parse(JSON.stringify(GoodsList));
          this.addSum();
        } else {
          this.Toast({
            message:'发生错误，请刷新重试'
          })
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
            message:'发生错误，请刷新重试'
        })
      });
    },

    changeNum(index, way){
      if(way > 0){
        if(this.todolist[index].ConPKGS == this.todolist[index].MaxConPKGS){
          this.Toast({
              message: '交货数量不能大于提货数量',
          });
          return false;
        }
        this.todolist[index].ConPKGS++;
        this.addSum();
      } else if (way < 0 && this.todolist[index].ConPKGS > 0) {
        this.todolist[index].ConPKGS--;
        this.addSum();
      } else {
        this.Toast({
            message: '请输入大于或等于0的数',
        });
      }
    },

    addSum(index){
      if(index || index == 0){
        if(this.todolist[index].ConPKGS) {
          this.todolist[index].ConPKGS = parseInt(this.todolist[index].ConPKGS);
        } else {
          this.todolist[index].ConPKGS = 0;
        }
        if(this.todolist[index].ConPKGS > this.todolist[index].MaxConPKGS){
          this.Toast({
              message: '交货数量不能大于提货数量',
          });
          this.todolist[index].ConPKGS = parseInt(this.todolist[index].MaxConPKGS);
        }
      };
      this.goodSum = 0;
      this.todolist.forEach(x => {
        this.goodSum += x.ConPKGS?(parseInt(x.ConPKGS)):0;
      })
    },
    


    cancel(){
       this.$router.push({
        path:'handoverlist'
       })
    },

    Confirm() {
      let OrderInfo = {
        BbMain: this.BbMain,
        PoMain: this.PoMain,
        Vehicle: this.Vehicle,
        VehicleDetail: this.VehicleDetail,
      };

      sessionStorage.setItem('goodslist', JSON.stringify(this.todolist));
      sessionStorage.setItem('orderlist', JSON.stringify(OrderInfo));

      this.$router.push({
        path: 'handoverconfirmpic'
      });
    },

    recebtn(index,e){
      var _this = e.target;
      $(_this).siblings(".cn-rece")[0].style.display="block";
      $(_this).siblings(".cn-lft")[0].style.display="none";
      $(_this).siblings(".cn-ipt-wrap")[0].style.display="none";
      $(_this)[0].style.display="none";
      this.clickBtn[index]=true;
      this.addSum();
    },
  }
};
</script>